<template>
  <div class="loginForArrive">
    <div class="iconWrapper">
      <div class="circleProgress_wrapper">
        <div class="wrapper right">
          <div class="circleProgress rightcircle"></div>
        </div>
        <div class="wrapper left">
          <div class="circleProgress leftcircle"></div>
        </div>
      </div>
      <i class="iconfont iconweixin"></i>
    </div>
  </div>
</template>

<script>
import wechatApi from '@/api/wechat'
import {setVenuesId} from '@/utils/auth'
export default {
  data() {
    return {
      id: this.$route.params.id
    }
  },
  methods: {
    getLogin() {
      setVenuesId(this.id)
      wechatApi.getWechatLogin().then((res) => {
        window.location.href = res.data
      })
    }
  },
  mounted() {
    this.getLogin()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.loginForArrive {
  // padding: 1.6rem 1.4rem;
  // box-sizing: border-box;
  height: 100%;
  .icon {
    height: 100%;
    padding-top: 10rem;
    box-sizing: border-box;
    i {
      color: #05b10f;
      font-size: 8rem;
    }
  }
}
.iconWrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2000;
  // -webkit-animation: fadeOut 4s linear 1;
  i {
    position: absolute;
    top: calc(50% - 4rem);
    left: calc(50% - 4rem);
    color: #05b10f;
    font-size: 8rem;
  }
}
.circleProgress_wrapper {
  width: 16rem;
  height: 18rem;
  margin: 10rem auto;
  position: relative;
  top: calc(50% - 18rem);
  left: calc(50% - 18rem);
}
.wrapper {
  width: 8rem;
  height: 18rem;
  position: absolute;
  top: 0;
  overflow: hidden;
}
.right {
  right: 0;
}
.left {
  left: 0;
}
.circleProgress {
  width: 16rem;
  height: 16rem;
  border: 0.2rem solid transparent;
  border-radius: 50%;
  position: absolute;
  top: 0;
  transform: rotate(-135deg);
}
.rightcircle {
  border-top: 0.2rem solid #05b10f;
  border-right: 0.2rem solid #05b10f;
  right: 0;
  // animation: circleProgressLoad_right 3s linear 1;
  // animation-fill-mode: forwards;
}
.leftcircle {
  border-bottom: 0.2rem solid #05b10f;
  border-left: 0.2rem solid #05b10f;
  left: 0;
  // animation: circleProgressLoad_left 3s linear 1;
  // animation-fill-mode: forwards;
}
@keyframes circleProgressLoad_right {
  0% {
    -webkit-transform: rotate(-135deg);
  }
  50%,
  100% {
    -webkit-transform: rotate(45deg);
  }
}
@keyframes circleProgressLoad_left {
  0%,
  50% {
    -webkit-transform: rotate(-135deg);
  }
  100% {
    -webkit-transform: rotate(45deg);
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1; /*初始状态 透明度为0*/
  }
  50% {
    opacity: 1; /*中间状态 透明度为0*/
  }
  100% {
    opacity: 0; /*结尾状态 透明度为1*/
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0; /*初始状态 透明度为0*/
  }
  50% {
    opacity: 0.5; /*中间状态 透明度为0*/
  }
  100% {
    opacity: 1; /*结尾状态 透明度为1*/
  }
}
</style>
